<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css?v=4.0.0" rel="stylesheet">
<base target="_blank">
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script src="js/demo/peity-demo.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/common.js"></script>
<style type="text/css">
#sel>select {
	width: 200px;
	height: 35px;
	float: left;
}

#sel {
	width: 100%;
	height: 50px;
	padding: 5px;
}
</style>
<title>滨海基金 -客户增长图表</title>

</head>

<body>
	<div class="ibox-title">
		<h5>
			客户 <small>统计,图</small>
		</h5>
		<div class="ibox-tools">
			<!-- <a class="btn  btn-sm btn-bitbucket" onclick="exportXLS()"> <i
				class="fa fa-share-square-o"></i> 导出xls
			</a> -->
			<button type="button" data-toggle="dropdown"
				style="border: none; color: white;"
				class="btn  btn-sm btn-bitbucket">
				导出xls <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu" style="left: -90px">
				<li><a onclick="exportXLS('all')" class="fa fa-share-square-o">&nbsp;导出所有员工数据</a></li>
				<li><a onclick="exportXLS('this')" class="fa fa-share-square-o">&nbsp;导出当前页面数据</a></li>
			</ul>
		</div>
	</div>
	<div class="ibox-content">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="sel">
			<!-- <select class="form-control" id="dept" name="dept" onchange="queryChart();" >
			<option value="team">本部小组</option>
			<option value="dept">全部门</option>
		</select>  -->
			<input type="hidden" id="userBranchId"
				value="${loginUser.branch.branchId }" /> <input type="hidden"
				id="userTeamId" value="${loginUser.team.branchId }" /> <input
				type="hidden" id="userQuarters" value="${loginUser.quarters }" />
			<select class="form-control" id="date" name="date"
				onchange="queryChart();">
				<option value="prevMonth">上月</option>
				<option value="nowYear" selected="selected">本年</option>
				<option value="1quarter">第一季度</option>
				<option value="2quarter">第二季度</option>
				<option value="3quarter">第三季度</option>
				<option value="4quarter">第四季度</option>
			</select> <select class="form-control" style="width: 200px" id="company"
				onchange="cpmpanyChage(this.value)">
				<%-- <c:forEach var="dept" items="${dept }">
					<option value="${dept.deptId }">${dept.deptName }（${dept.remake }）</option>
				</c:forEach> --%>
			</select> <select class="form-control" style="width: 150px" id="branch"
				onchange="branchChage(this.value)">
				<option value="">-请选择-</option>
			</select> <select class="form-control" style="width: 150px"
				onchange="queryChart()" id="team" onchange="">
				<option value="">-请选择-</option>
			</select>
		</div>
		<div>
			<div id="main" style="width: 80%; height: 600px; float: left;"></div>
		</div>
	</div>
	<!-- 隐藏一个div-form，作为导出xls使用 -->
	<div style="display: none">
		<form id="exportForm">
			<input id="export-title" name="title" value="客户增长"> <input
				id="export-dateType" name="dateType"> <input
				id="export-type" name="type"> <input id="export-deptId"
				name="deptId"> <input id="export-branchId" name="branchId">
			<input id="export-teamId" name="teamId"> <input
				id="export-status" name="status">
		</form>
	</div>
	<script type="text/javascript">
		$(function() {
			cpmpanyDept();
		});
		// 基于准备好的dom，初始化echarts实例cccccccccc
		var bar = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var barOption = {
			title : {
				text : '总数'
			},
			tooltip : {
				trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
			},
			legend : {
				left : 'center',
				data : []
			},
			xAxis : {
				data : []
			},
			yAxis : {
				left : 100,
				type : 'value'
			},
			series : [ {
				name : '销售额',
				type : 'bar',
				data : [ 35, 20, 16, 10, ]
			} ]
		};
		bar.setOption(barOption);
		loadAjax(null, bar);//加载图表的方法
		function queryChart() {

			var type;
			var deptId;
			var branchId;
			var teamId;
			if ($("#company>option:selected").val() == "") {
				typeStr = ""
			}

			if ($("#company>option:selected").val() != "") {
				deptId = $("#company>option:selected").val();
				type = "dept";
			}

			if ($("#branch>option:selected").val() != "") {
				branchId = $("#branch>option:selected").val();
				type = "branch"
			}
			if ($("#team>option:selected").val() != "") {
				teamId = $("#team>option:selected").val();
				type = "team"
			}

			var dateType = $("#date>option:selected").val();
			var deptType = $("#dept>option:selected").val();
			var param = {};
			param.type = type;
			param.deptId = deptId;
			param.branchId = branchId;
			param.teamId = teamId;
			param.dateType = dateType;
			param.deptType = deptType;
			loadAjax(param, bar);
		};

		function loadAjax(param, bar) {
			// 使用刚指定的配置项和数据显示图表。
			var deptNames = [];//x轴 显示（横着）
			var personNumbers = [];//Y轴显示  （竖着）
			var max = 0;
			$.ajax({
				url : 'customerCharts.do',
				type : 'post',
				data : param,
				dataType : 'json',
				async : false,
				success : function(result) {

					if (result != null) {
						for (var i = 0; i < result.data.length; i++) {
							deptNames[i] = result.data[i].deptName;
						}
						for (var i = 0; i < result.data.length; i++) {
							personNumbers[i] = result.data[i].personNumber;
							max += personNumbers[i];
						}
						bar.setOption({
							title : {
								text : '总数:' + max
							},
							yAxis : [ {
								name : "人数",
								min : 0
							} ],
							xAxis : {
								name : "名称",
								data : deptNames
							},
							series : [ {
								// 根据名字对应到相应的系列
								name : "人数",
								type : 'bar',
								data : personNumbers
							} ]
						});
						return;
					}

					//弹框插件
				},
				error : function() {
					sweetAlert("错误", "未知错误!", "error");
				}

			});
		}
		function cpmpanyDept() {
				$.ajax({
					url : "getDeptInfo.do",
					type : "post",
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							var branchHtml = "";
							if(result.quarters==5 || result.quarters==6){
   								branchHtml += "<option value=\"\" >-全部分公司-</option>";
   							}
							for (var i = 0; i < result.data.length; i++) {
								branchHtml += "<option value=\""
										+ result.data[i].deptId + "\">"
										+ result.data[i].deptName + "(" +result.data[i].remake+")</option>";
							}
							$("#company").append(branchHtml);
							$("#company").trigger("change");

						} else {
							sweetAlert("提示", "操作失败,请刷新后重试!", "error");
						}
					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}
				});// ajax end;
		}
		function cpmpanyChage(id) {
   			if ($("#company").val() != "" && $("#company").val() != null) {
   				$.ajax({
   					url : "getBranchInfo.do",
   					type : "post",
   					data : {
   						id : id
   					},
   					dataType : "json",
   					success : function(result) {
   						if (result.code == 0) {
   							var branchHtml = "";
   							if(result.quarters!=2 && result.quarters!=1){
   								branchHtml += "<option value=\"\" >-请选择-</option>";
   							}
   							for (var i = 0; i < result.branch.length; i++) {
   								branchHtml += "<option value=\""
   										+ result.branch[i].branchId + "\">"
   										+ result.branch[i].branchName +"</option>";
   							}
   							$("#branch").empty();
   				   			$("#team").empty();
   				   			$("#team").append("<option value=\"\" >-请选择-</option>");
   							$("#branch").append(branchHtml);
   							$("#branch").trigger("change");

   						} else {
   							sweetAlert("提示", "未知异常!", "error");
   						}
   					},
   					error : function() {
   						sweetAlert("异常", "网络出现异常!", "error");
   					}
   				});// ajax end;
   			}else{
				$("#branch").empty();
				$("#branch").append("<option value=\"\" >-请选择-</option>");
				$("#branch").trigger("change");
			}
   			
   		}
   		function branchChage(id) {  
   			if ($("#branch").val() != "" && $("#branch").val() != null) {
   				$.ajax({
   					url : "getTeamInfo.do",
   					type : "post",
   					data : {
   						id : id
   					},
   					dataType : "json",
   					success : function(result) {
   						if (result.code == 0) {
   							var branchHtml = "";
   							if(result.quarters!=1){
   								branchHtml += "<option value=\"\" >-请选择-</option>";
   							}
   							for (var i = 0; i < result.data.length; i++) {
   								branchHtml += "<option value=\""
   										+ result.data[i].branchId + "\">"
   										+ result.data[i].branchName + "</option>";
   							}
   							$("#team").empty();
   							$("#team").append(branchHtml);
   							queryChart();
   						} else {
   							sweetAlert("提示", "未知异常!", "error");
   						}
   					},
   					error : function() {
   						sweetAlert("异常", "网络出现异常!", "error");
   					}
   				});// ajax end;
   			}else{
   				$("#team").empty();
   				$("#team").append("<option value=\"\" >-请选择-</option>");
   				queryChart();
   			}
   			
   		}
		function exportXLS(status) {
			var type;
			var deptId;
			var branchId;
			var teamId;

			if ($("#company>option:selected").val() != "") {
				deptId = $("#company>option:selected").val();
				type = "dept";
			}

			if ($("#branch>option:selected").val() != "") {
				branchId = $("#branch>option:selected").val();
				type = "branch"
			}
			if ($("#team>option:selected").val() != "") {
				teamId = $("#team>option:selected").val();
				type = "team"
			}

			var dateType = $("#date>option:selected").val();

			$("#export-dateType").val(dateType);
			$("#export-type").val(type);
			$("#export-deptId").val(deptId);
			$("#export-branchId").val(branchId);
			$("#export-teamId").val(teamId);
			$("#export-status").val(status);

			$('#exportForm').attr('action', 'customerGrowthExport');
			$('#exportForm').attr('target', '_blank');
			$('#exportForm').submit();
		}
	</script>



</body>

</html>